<template>
	<div class="count-manage">
  <div class="new-add">
    <button type="btn" class="btn mian" @click="addNew()">新增</button>
  </div>
    <!-- 内容列表 -->
    <div class="count-manage-list">
      <w-table :columns="columns">
        <!-- 商品列表 -->
        <tr class="count-height" v-for="(countDetail, index) in countMenu">
          <td v-text="index + 1"></td>
          <td>{{countDetail.bankType | bankType}}</td>
          <td v-text="countDetail.trueName"></td>
          <td v-text="countDetail.bankNumber"></td>
          <td>{{countDetail.bankName | isNull}}</td>
          <td>{{countDetail.subBranchName | isNull}}</td>
          <td>{{countDetail.bankAddress | isNull}}</td>
          <td>{{countDetail.defaultCollection | defaultCollection}}</td>
          <td>
	          <div class="btns" @click="modify(countDetail.id)">修改</div>
	          <div class="btns" @click="deletes(countDetail.id)">删除</div>
          </td>
        </tr>
        <!-- 如果没有数据，则加载此提示消息 -->
        <tr v-if="!countMenu || countMenu.length == 0">
          <td colspan="9">暂时没有数据哟！</td>
        </tr>
      </w-table>
    </div>
    <!-- 分页 -->
    <w-paging v-show="this.countMenu && this.countMenu.length > 0" :current="currentPage" :total="total" @page="jumptToPage"></w-paging>
    <div class="editor" v-if="isShow == 1">
      <div class="editor-content">
        <add-count @close-win="closeThisWin" :title="title" :id="id"></add-count>
      </div>
    </div>
  </div>
</template>
<script>
import addCount from './addCount/addCount.vue'
import { apiCount } from '../../common/api'

export default {
  data() {
    return {
      // 表格头
      columns: [
        {title: '序号'},
        {title: '账户类型', width: '20%'},
        {title: '账户名称'},
        {title: '账户号码'},
        {title: '开户行'},
        {title: '所属支行'},
        {title: '开户行城市'},
        {title: '默认打款账户'},
        {title: '操作'}
      ],
      countMenu: [],
      isShow: 0,
      title: '新增',
      id: -1,
      currentPage: 1,
      total: 0,
      showCount: 10
    }
  },
  methods: {
    // 下一页
    jumptToPage(page = 1) {
      // 设置当前页
      this.currentPage = page
      // 获取列表
      this.showBandCardAll()
    },
    // 修改
    modify(id) {
      this.isShow = 1
      this.id = id
      this.title = '修改'
    },
    // 关闭编辑框
    closeThisWin() {
      this.showBandCardAll()
      this.isShow = 0
    },
    // 新增银行卡
    addNew() {
      this.isShow = 1
      this.title = '新增'
    },
    // 删除
    deletes(id) {
      // 弹出框确认
      this.$modal({
        title: '删除账号',
        content: '您确定要删除吗？',
        onConfirm: () => {
          this.deleteBankCard(id)
        }
      })
    },
    // 查询所有银行卡信息
    showBandCardAll() {
       apiCount.showBandCardAll(this.$store.getters.token, this.currentPage, this.showCount).then((data) => {
        this.countMenu = data.bankLists
        this.total = data.totalPageCount
      })
    },
    // 根据id删除银行卡
    deleteBankCard(id) {
      apiCount.deleteBankCard(id, this.$store.getters.token).then((data) => {
        this.showBandCardAll()
      })
    }
  },
  components: {
    addCount
  },
  created() {
    this.showBandCardAll()
  },
  filters: {
    // 账户类型判断
    bankType(bankType) {
      if (bankType == 1) {
        return '个人账户'
      } else {
        return '企业账户'
      }
    },
    // 默认账户判断
    defaultCollection(defaultCollection) {
      if (defaultCollection == 0) {
        return '否'
      } else {
        return '是'
      }
    },
    isNull(isNull) {
      if (isNull) {
        return isNull
      } else {
        return '=='
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .count-manage {
    margin-top: 70px;
    .new-add {
      position: absolute;
      z-index: 11;
      width: 100%;
      height: 40px;
      background-color: #fff;
      top: 0;
      left: 0;
      padding-left: 30px;
      .btn {
        background-color: #f00384;
        color: #fff;
      }
    }
    .bgw {
      background-color: white;
      padding: 20px 30px 0px 30px;
      // margin: -20px -30px 0px -30px;
      position: relative;
      z-index: 10;
    }

    .checked-width {
      width: 80px;
    }

    .all {
      margin-left:  18px;
    }

    .form-inline {
      margin: 20px 0;
    }

    .mal {
      margin-left: 18px;
      width: 72px;
    }

    .mald {
      margin-left: 38px;
      width: 72px;
    }

    .mr36 {
      margin-right: 36px;
    }

    .pdl30 {
      padding-left: 30px;
    }

    .input-inline {
      display: inline-block;
      margin-left: 14px;
      width: 194px;
    }

    .count-manage-list {
      margin-top: 30px;
    }

    .reason {
      color: #ff7e00;
    }
    .btns {
    	color: #f00384;
    	text-align: center;
    	&:first-child {
    		margin-bottom: 10px;
    	}
      cursor: pointer;
    }
    .count-height {
    	height: 130px;
    }
    .editor {
      background-color:rgba(0, 0, 0, 0.5);
      position: fixed;
      z-index: 12;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      .editor-content {
        position: relative;
        top: 15%;
        width: 460px;
        height: 460;
        margin: 0 auto;
      }
    }
  }
</style>
